<!-- 教学页面代码 -->

<template>
  <div ref="reflayoutContainercontainer"></div>
</template>

<script>
import {
  Layout as LayoutDHX,
} from 'dhx-suite-package';
import LayoutContainer from '@/components/learn/layoutLearn';

export default {
  name: 'LearnBase',
  data: () => ({
    // 0. 整体框架
    layoutContainer: null,
  }),
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.layoutContainer = this.layoutContainer_create(
        this.$refs.reflayoutContainercontainer,
      );
      this.layoutContainer_event();
      this.layoutContainer_reload();

      return this.layoutContainer;
    },
    // 0. 整体框架
    layoutContainer_create(ref) {
      const mylayout = new LayoutDHX(ref, {
        type: 'none',
        cols: [
          {
            id: 'Container',
            collapsable: false,
            resizable: false,
            height: document.documentElement.clientHeight - 57,
          },
        ],
      });
      return mylayout;
    },
    layoutContainer_event() {},
    layoutContainer_reload() {
      this.layoutContainer.getCell('Container').attach(LayoutContainer);
    },
  },
};
</script>

<style>
  @import "github-markdown-css/github-markdown.css";
  @import "highlightjs/styles/atom-one-light.css";
</style>
